<template>
   <div class="home">
    <!-- 顶部销售额 -->
    <div class="header">
      <div class="item">
        总销售额
        <div class="total-num">{{totalData.saleTotal | formatNumber}}</div>
        <div class="today-num">今日销售额：{{totalData.sale | formatNumber}}</div>
      </div>
      <div class="item">
        总访问量
        <div class="total-num">{{totalData.viewsTotal | formatNumber}}</div>
        <div class="today-num">今日销售额：{{totalData.views | formatNumber}}</div>
      </div>
      <div class="item">
        总收藏量
        <div class="total-num">{{totalData.collectTotal | formatNumber}}</div>
        <div class="today-num">今日销售额：{{totalData.collect | formatNumber}}</div>
      </div>
      <div class="item">
        总支付量
        <div class="total-num">{{totalData.payTotal | formatNumber}}</div>
        <div class="today-num">今日销售额：{{totalData.pay | formatNumber}}</div>
      </div>
    </div>
    <!-- 中部内容区 -->
    <div class="content">
      <div class="left-sale">
        <div class="title">月销售额</div>
        <div id="main-sales" style="width: 800px;height:300px"></div>  <!---注意这里必须指定width和height否则不能显示图-->
      </div>
      <div class="right-sale">
        <div class="title">产品销售比例</div>
        <div id="main-ratio" style="width: 500px;height:300px"></div>
      </div>
    </div>
    <!-- 底部card栏 -->
    <div class="home-footer">
      <el-card class="box-card">
        <div slot="header" class="clearfix">
          <span>今日订单</span>
        </div>
        <div class="item text">
          <el-row>
            <el-col :span="8">
              <div class="title">今日订单数</div>
              <div>22</div>
            </el-col>
            <el-col :span="8">
              <div class="title">汇总确认订单</div>
              <div>512</div>
            </el-col>
            <el-col :span="8">
              <div class="title">今日金额</div>
              <div>595</div>
            </el-col>
          </el-row>
        </div>
      </el-card>
      <el-card class="box-card">
        <div slot="header" class="clearfix">
          <span>本月订单</span>
        </div>
        <div class="item text">
          <el-row>
            <el-col :span="8">
              <div class="title">本月订单数</div>
              <div>99927</div>
            </el-col>
            <el-col :span="8">
              <div class="title">汇总确认订单</div>
              <div>76286</div>
            </el-col>
            <el-col :span="8">
              <div class="title">累计金额</div>
              <div>113710</div>
            </el-col>
          </el-row>
        </div>
      </el-card>
      <el-card class="box-card">
        <div slot="header" class="clearfix">
          <span>快捷入口</span>
        </div>
        <div class="item text">
          <el-row>
            <el-col :span="8">
              <el-button type="primary">产品管理</el-button>
            </el-col>
            <el-col :span="8">
              <el-button>消息管理</el-button>
            </el-col>
            <el-col :span="8">
              <el-button>内容管理</el-button>
            </el-col>
          </el-row>
        </div>
      </el-card>
    </div>
  </div>
</template>

<script>
import * as echarts from 'echarts';
export default {
  name: 'Home',
  //进行相关数据查询接口
  created(){
    this.totalInfo()
  },
  data(){
    return {
      totalData:{}
    }
  },
  methods:{
    async totalInfo(){
      let res = await this.$api.totalInfo()
      console.log(res)
      this.totalData = res.data.data.list
    }
  },
  //注册一个局部的过滤器
  filters:{
    formatNumber: function(value) {
      // 将数字格式化为千分位
      if (!value) return '0';
      //return value.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',');
      return value.toLocaleString()
    }
  },
  mounted() {
    // 基于准备好的dom，初始化echarts实例 

    /** 相关说明
     *  Echars相关配置项说明 https://echarts.apache.org/zh/option.html#title
     *  tooltip:提示框组件
     */
    //月销售额 使用条形统计图
    var salesChart = echarts.init(document.getElementById('main-sales'));
    salesChart.setOption({
      title: {
        text: 'ECharts 入门示例'
      },
      tooltip: {
         trigger: 'axis',
      },
      xAxis: {
        data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
      },
      yAxis: {}, /**y轴echars会根据series.data数据 帮助自适应*/
      series: [
        {
          name: '销量',
          type: 'bar',
          data: [5, 20, 36, 10, 10, 20]
        }
      ]
    });
    //产品销售比例 使用饼状图
    var radioChart = echarts.init(document.getElementById('main-ratio'));
    radioChart.setOption({
        title: {
        text: 'Referer of a Website',
        subtext: 'Fake Data',
        left: 'center'
      },
      tooltip: {
        trigger: 'item'
      },
      legend: {
        orient: 'vertical',
        left: 'left'
      },
      series: [
        {
          name: 'Access From',
          type: 'pie',
          radius: '50%',
          data: [
            { value: 1048, name: 'Search Engine' },
            { value: 735, name: 'Direct' },
            { value: 580, name: 'Email' },
            { value: 484, name: 'Union Ads' },
            { value: 300, name: 'Video Ads' }
          ],
          emphasis: {
            itemStyle: {
              shadowBlur: 10,
              shadowOffsetX: 0,
              shadowColor: 'rgba(0, 0, 0, 0.5)'
            }
          }
        }
      ]
  })
  },
}
</script>
<style lang="less" scoped>
/*@import url(); 引入公共css类*/

.home {
  .header {
    display: flex;
    height: 120px;
    padding-right: 30px;
    .item {
      flex: 1;
      position: relative;
      margin: 0 20px;
      padding: 10px;
      background-color: #fff;
      border-radius: 10px;
      font-size: 14px;
      font-weight: 700;
      color: #fff;
      .total-num {
        margin: 10px;
        font-size: 22px;
      }
      .today-num {
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        padding: 10px 20px;
        border-top: 1px solid #f6f5f5;

        font-weight: 400;
      }
    }
    .item:nth-child(1) {
      background-image: linear-gradient(#de877c, #88554d);
    }
    .item:nth-child(2) {
      background-image: linear-gradient(#409eff, #2e556e);
    }
    .item:nth-child(3) {
      background-image: linear-gradient(#b54fa8, #713c7a);
    }
    .item:nth-child(4) {
      background-image: linear-gradient(#1cd2f1, #39717a);
    }
  }
  .content {
    display: flex;
    height: 320px;
    margin: 20px;
    .left-sale {
      flex: 2;
      padding: 10px;
      margin-right: 20px;
      background-color: #fff;
    }
    .right-sale {
      flex: 1;
      padding: 10px;
      background-color: #fff;
    }
  }
  .home-footer {
    display: flex;
    padding-left: 20px;
    margin-bottom: 20px;

    .text {
      font-size: 14px;
    }

    .item {
      color: #333;
    }

    .clearfix:before,
    .clearfix:after {
      display: table;
      content: '';
    }
    .clearfix:after {
      clear: both;
    }

    .box-card {
      flex: 1;
      margin-right: 30px;
      span {
        font-weight: 600;
      }
    }
    .el-row {
      margin-bottom: 20px;
      &:last-child {
        margin-bottom: 0;
      }
    }
    .el-col {
      border-right: 1px solid #eee;
      border-radius: 4px;
      text-align: center;
      .title {
        margin-bottom: 10px;
      }
      .title + div {
        font-size: 24px;
      }
    }
    .el-col:last-child {
      border-right: none;
    }
  }
}
</style>
